<template>
  <div class="vote-rank">
    <div v-if="false">{{testData}}</div>
    <div class="overview">
      <div class="content">
        <div class="one">大王您只能为一个用户投出您<span>宝贵的一票</span></div>
        <div class="two">这票将决定TA的人气，珍惜哦~~</div>
      </div>
    </div>
    <div class="wave">
      <img src="~assets/images/bowen@3x.png" width="100%" height="40px">
    </div>

    <table class="table players">
      <thead>
      <tr>
        <td>序号</td>
        <td>参赛人</td>
        <td>人气</td>
        <td>操作</td>
      </tr>
      </thead>
    </table>
    <gj-loadmore :bottom-method="loadBottom" ref="loadmore">
      <table class="players table">
        <tbody class="playersList">
        <tr v-for="(item,index) in players">
          <td class="one">
            <i class="iconfont icon-paiming1" v-if="index == 0"></i>
            <i class="iconfont icon-paiming2" v-else-if="index == 1"></i>
            <i class="iconfont icon-paiming3" v-else-if="index == 2"></i>
            <span v-else :class="{'hund':index+1>99,'thousand':index+1>999,'wang':index+1>9999}">{{index+1}}</span>
          </td>
          <td class="two" @click.stop.prevent="gameOtherDetail(item)">
            <img :src="item.USER_HEAD" class="userhead">
          </td>
          <td class="three" @click.stop.prevent="gameOtherDetail(item)">
            <div class="nickname">{{item.NICKNAME}}</div>
          </td>
          <td class="four popularNum" :data-cid="item.USER_CODE" :id="'voteNum_'+item.USER_CODE">{{item.POPULAR_NUM}}</td>
          <td class="five" v-if="gameStep <4" @click.stop.prevent="vote(item)">
            <div :class="item.VOTEFLAG==0?'notVoted':'hasVoted'" class="vote-btn" :id="'voteBtn_'+item.USER_CODE" >
              {{item.VOTEFLAG==0?'投票':'已投票'}}
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </gj-loadmore>
  </div>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import LoadMore from 'components/LoadMore'
  import _ from 'underscore'

  export default {
    data(){
      return {
        players: [],
        pageSize: 20,
        pageNo: 1,
        testData: 'testData'
      }
    },
    props: {
      gameId: {
        type: String
      },
      gameStep: {
        type: String
      },
      gameName:{
        type: String
      },
      userCode: {
        type: String
      },
      identity: {
        type: String
      },
      gameSubKind: {
        type: String,
        default: ''
      }
    },
    components: {
      'gj-loadmore': LoadMore
    },
    methods: {
      loadBottom() {
        if(this.gameSubKind == 'CLS' && this.players.length > 5000){
          this.$store.dispatch('setTip', {text: '哇噻，竟然看了5000人！！！我要保持神秘，不给你看其他人^v^'});
          return;
        }
        this.fetchData();
      },
      fetchData(){
        let params = {
          gameId: this.gameId,
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          USER_CODE: this.userCode
        };
//        self.testData = JSON.stringify(params);
//        self.players = [{"USER_CODE":"280177","VOTEFLAG":"0","POPULAR_NUM":"5","USER_HEAD":"http://dl.app.gtja.com/pictures/nrngimg/niurenimg/11010261.jpg","NICKNAME":"臭小子字数字数","SUBSCRIBE_PRICE":"0.000000"},{"USER_CODE":"7989729","VOTEFLAG":"0","POPULAR_NUM":"3","USER_HEAD":"http://dl.app.gtja.com/pictures/niutou/tou2@2x.png","NICKNAME":"赵英宇","SUBSCRIBE_PRICE":"0.000000"},{"USER_CODE":"5145513","VOTEFLAG":"0","POPULAR_NUM":"0","USER_HEAD":"https://dl.app.gtja.com/pictures/niutou/tou2@2x.png","NICKNAME":"家语ok","SUBSCRIBE_PIRCE":"0"},
//          {"USER_CODE":"7825369","VOTEFLAG":"0","POPULAR_NUM":"0","USER_HEAD":"https://dl.app.gtja.com/pictures/niutou/tou2@2x.png","NICKNAME":"大宝妹007","SUBSCRIBE_PIRCE":"0"}];
        RemoteDAO.callUC12008320(params,(response)=> {
          let list = [];
          if (Number(response.error) == 0) {

            list = response.data.body;
            if (list.length > 0) {
              this.searchHeadNick(list);//批量查询用户最新的头像和昵称 并打印
            }else{
              this.$refs.loadmore.onBottomError('暂无数据');
            }
          } else {
            this.$refs.loadmore.onBottomError(response.data);//报错
          }
        });
      },
      /**
       *  批量查询用户最新的头像和昵称 并打印
       */
      searchHeadNick(list){
        let array = [];
        for (let i = 0; i < list.length; i++) {
          array.push(list[i].USER_CODE);
        }
        let userCodes = array.join(",");
        //批量查询用户
        RemoteDAO.callUC12008316(this.userCode, userCodes, (resp)=>{
          if (resp.error == "0") {
            let body = resp.data.body || [];
            //对批量查询的结果进行匹配赋值，因为批量查询接口是无序的
            for (let k = 0; k < list.length; k++) {
              list[k].SUBSCRIBE_PRICE = '0';
              list[k].NICKNAME = list[k].NICKNAME || "--";
              list[k].USER_HEAD = list[k].USER_HEAD || CommonUtil.getDefaultUserHead(list[k].USER_CODE);
              for (let i = 0; i < body.length; i++) {
                if (list[k].USER_CODE == body[i].USER_CODE) {
                  list[k].SUBSCRIBE_PRICE = CommonUtil.toFixed(body[i].SUBSCRIBE_PRICE, 0) || '0';
                  list[k].NICKNAME = body[i].NICKNAME || list[k].NICKNAME;
                  list[k].USER_HEAD = body[i].USER_HEAD || CommonUtil.getDefaultUserHead(list[k].USER_CODE);
                  break;
                }
              }
            }
            this.players = this.players.concat(list);
            if(list.length<this.pageSize){
              this.$refs.loadmore.onBottomAllLoaded();//全部数据加载完成
            }else{
              this.pageNo = this.pageNo + 1;
              this.$refs.loadmore.onBottomLoaded(); //单次加载成功
            }
            LocalDAO.setGameVote({players: this.players})
          } else {
            this.$store.dispatch('setTip', {text: resp.data});
          }
        });
      },
      vote(item){
        let clientId = item.USER_CODE;
        let args = {
          userCode: this.userCode,
          actionType: '00',
          businType: '',
          communityType: '6',
          relationUserCode: clientId,
          relationUserName: '',
          objectType: '1',
          beginDate: '',
          endDate: '',
          communityContent: '',
          topicCode: this.gameId,
          topicName: '',
          serialNo: ''
        };
        //投票接口
        RemoteDAO.callUC12008306(args,(resp)=> {
          if (Number(resp.error) == 0) {
            this.$store.dispatch('setTip', {text: "投票成功"});
            item.POPULAR_NUM = Number(item.POPULAR_NUM) + 1;
            item.VOTEFLAG = 1;
          } else {
            this.$store.dispatch('setTip', {text: resp.data});
          }
        });
      },
      gameOtherDetail(item){
        let clientId = item.USER_CODE;
        if (!_.contains(["3", "4"], this.gameStep)) {// 非  比赛中、比赛已结束，弹出弹窗
          this.$store.dispatch('setModal', {visible: true, modalId: 'gameNotStartModal'});
        } else if (clientId == this.userCode) { // 查看自己
          this.$router.push({
            path: '/game/gameselfdetail',
            query: {gameId: this.gameId, gameName: this.gameName, userCode: clientId, identity: this.identity}
          });
        } else {
          // 判断是否已订阅
          RemoteDAO.callUC12008309(this.userCode, "1", "1", "3", "1", "1", "", clientId, "0", (response)=> {
            if (response.error == "0") {
              if (response.data.body.length > 0) { // 已订阅
                this.$router.push({
                  path: '/game/gameotherdetail',
                  query: {gameId: this.gameId, gameName: this.gameName, userCode: clientId, identity: this.identity}
                });
              } else { // 未订阅，弹出订阅弹窗
                this.$store.dispatch('setModal', {
                  visible: true,
                  modalId: 'subscribeModal',
                  relationUserCode: clientId,
                  callback: null
                });
              }
            } else {
              this.$store.dispatch('setTip', {text: response.data});
            }
          });
        }
      }
    }
  }

</script>

<style lang="css" scoped>

</style>
